<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新增生产工艺</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <script src="vendor/jquery/jquery.js"></script>
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<script>
    $(function(){

        var selectRM;
        var selectRMName;
        var RM;
        //此字段记录生产工艺详情信息
        var RMInfo = new Array();
        var currentGoods;
        //为placeNewPTClick添加点击事件
        $("#placeNewPtClick").click(function () {
            //构造json
            //var time = $("#orderFinishTimeDateBox").val();
            console.log(RMInfo);
            var RMInfostr = JSON.stringify(RMInfo);
            var PTInfo = {
                "name":$("#newPTName").val(),
                "goodsName":currentGoods.goodName,
                "goodsId":currentGoods.id,
                "technology":RMInfostr};
            console.log(currentGoods)

            $.ajax({
                url: "/erp/pt/add",
                //构造向后端传入的json数据
                data: PTInfo,
                dataType:"json",
                type:"POST",
                //请求成功回调此函数，data为返回的数据
                success:function (data) {
                    //判断data里的值，反馈给前端
                    if(data.code == 200) {
                        alert("新建生产工艺成功")
                        window.location.reload()
                    } else {
                        alert(data.data)
                    }
                }
            })
        })

        //原材料下拉框按钮
        $("#RMBtn").click(function () {
            console.log("RMBtn click")
            $.ajax({
                url: "/erp/rawMeterial/list",
                //构造向后端传入的json数
                dataType:"json",
                type:"GET",
                //请求成功回调此函数，data为返回的数据
                success:function (data) {
                    console.log(
                        data
                    )
                    //判断data里的值，反馈给前端
                    if (data.code==200 && data.data){
                        RM = data.data;
                        $("#RMList").children('li').remove();
                        for(var i = 0;i<data.data.length;i++){
                            $("#RMList").append("<li><a href='#'>"+data.data[i].name+"</a></li>")
                        }
                    }

                }
            })
        })
        //原材料下拉框列表。
        $("#RMList").on("click","li",function(){
            //只需要找到你点击的是哪个ul里面的就行
            $("#RMName").val($(this).text());
            selectRMName = $(this).text();


        });

        //产品下拉框按钮
        var goods;
        var selectGoodsName;
        $("#PTBtn").click(function () {
            console.log("PTBtn click")
            $.ajax({
                url: "/erp/goods/list",
                //构造向后端传入的json数
                dataType:"json",
                type:"GET",
                //请求成功回调此函数，data为返回的数据
                success:function (data) {
                    console.log(
                        data
                    )
                    //判断data里的值，反馈给前端
                    if (data.code==200 && data.data){

                        goods = data.data;
                        console.log(goods)
                        $("#PTGoodsList").children('li').remove();
                        for(var i = 0;i<data.data.length;i++){
                            $("#PTGoodsList").append("<li><a href='#'>"+data.data[i].goodName+"</a></li>")
                        }
                    }

                }
            })
        })
        //产品下拉框列表。
        $("#PTGoodsList").on("click","li",function(){
            //只需要找到你点击的是哪个ul里面的就行
            $("#choosePTGoods").val($(this).text());
            console.log(goods);
            for (var i = 0;i<goods.length;i++){

                if(goods[i].goodName==$(this).text()){
                    console.log("11111")
                    // client = customers[i].client;
                    // buyerAddress = customers[i].buyerAddress;
                    // buyerPhoneNumber = customers[i].buyerPhoneNumber;
                    currentGoods = goods[i];
                }
            }


        });

        //为saveNewPTBtn添加监听事件
        $("#saveNewPTBtn").click(function () {
            for (var i in RM) {
                if (RM[i].name == selectRMName) {
                    selectRM = RM[i];
                    break;
                }
            }
            console.log(selectRM);//test ok
            //构造出商品详情列表
            var info =
                {
                    "RM":selectRM,
                    "RMPercent":$("#RMPercent").val()
                }
            RMInfo.push(info);
            generateGoodsTable(RMInfo);
            //console.log(goodsInfo)
            //清除模态框数据
            $("#RMName").val("")
            $("#RMPercent").val("")
            //关闭模态框
            $("#newPTCloseBtn").click();
        })

        function generateGoodsTable(goodsData){
            $("#newPTInfoTable").empty();
            //添加表头信息
            $("#newPTInfoTable").append("<thead>" +
                " <tr>\n" +
                " <th valign=middle align=center>编号</th>" +
                " <th valign=middle align=center>原材料</th>" +
                " <th valign=middle align=center>比例（%）</th>" +
                " </tr>"+
                " </thead>");
            for (var i=0;i<goodsData.length;i++){
                $("#newPTInfoTable").append("<tr>" +
                    "<td>" +
                    (i+1) +
                    "</td>" +
                    "<td>" +
                    goodsData[i].RM.name+
                    "</td>" +
                    "<td>" +
                    goodsData[i].RMPercent+
                    "</td>" +
                    "</tr>")
                //添加表数据
                /*goodsData[i].goods.goodName
                goodsData[i].goodsNumber
                goodsData[i].goodsUnit*/
            }
        }



    })

</script>


<body>
<div class="page">
    <!-- Main Navbar-->
    <header class="header">
        <nav class="navbar">
            <!-- Search Box-->
            <div class="search-box">
                <button class="dismiss"><i class="icon-close"></i></button>
                <form id="searchForm" action="#" role="search">
                    <input type="search" placeholder="What are you looking for..." class="form-control">
                </form>
            </div>
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <!-- Navbar Header-->
                    <div class="navbar-header">
                        <!-- Navbar Brand --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
                        <div class="brand-text d-none d-lg-inline-block"><strong>子恒针erp</strong></div>
                    </a>

                        <!--&lt;!&ndash; Toggle Button&ndash;&gt;<a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>-->
                    </div>
                    <!-- Navbar Menu -->

                </div>
            </div>
        </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
         <!--Side Navbar-->
        <nav class="side-navbar">

            <!-- Sidebar Navidation Menus-->
            <ul class="list-unstyled">

                <li ><a href="#producedropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i><font color="black" size="3.8"> <strong>生产管理</strong></font></a>
                    <ul id="producedropdownDropdown" class="collapse list-unstyled ">
                        <li ><a href="#orderDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong> 订单管理</strong></font></a>
                            <ul id="orderDropdown" class="collapse list-unstyled ">
                                <li ><a href="addOrder.html">&nbsp;&nbsp;&nbsp;&nbsp;新增订单</a></li>

                                <li><a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;查询订单</a></li>
                            </ul>
                        </li>

                        <li><a href="searchGoods.html"><font color="#626262" size="3"><strong>产品管理</strong></font></a>
                            <!--<ul id="planDropdown" class="collapse list-unstyled ">-->
                            <!--<li><a href="addGoods.html">&nbsp;&nbsp;&nbsp;&nbsp;新增产品</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询产品</a></li>-->
                            <!--</ul>-->
                        </li>

                        <li><a href="manageCustomer.html"><font color="#626262" size="3"><strong>客户管理</strong></font></a>
                            <!--<ul id="taskDropdown" class="collapse list-unstyled ">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增客户</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询客户</a></li>-->
                            <!--</ul>-->
                        </li>

                        <li><a href="#processDropdown" aria-expanded="false" data-toggle="collapse"><font color=black size="3"><strong>生产工艺管理</strong></font></a>
                            <ul id="processDropdown" class="collapse list-unstyled ">
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;<u>新增生产工艺</u></a></li>
                                <li><a href="manageProductionTechnology.html">&nbsp;&nbsp;&nbsp;&nbsp;查询生产工艺</a></li>
                            </ul>
                        </li>

                        <li><a href="manageOutsourcingEnterprise.html"><font color="#626262" size="3"><strong>外协企业管理</strong></font></a>
                            <!--<ul id="unfinishedDropdown" class="collapse list-unstyled ">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增外协企业</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;管理外协企业</a></li>-->
                            <!--</ul>-->
                        </li>

                        <!-- <li><a href="#dyeingDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>印染过程管理</strong></font></a>
                             <ul id="dyeingDropdown" class="collapse list-unstyled ">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;印染入库</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;印染出库</a></li>
                             </ul>
                         </li>

                         <li><a href="#finishedDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>成品出入库管理</strong></font></a>
                             <ul id="finishedDropdown" class="collapse list-unstyled ">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;成品入库</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;成品出库</a></li>
                             </ul>
                         </li>

                         <li><a href="#inquireDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>综合查询</strong></font></a>
                             <ul id="inquireDropdown" class="collapse list-unstyled ">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;订单完成情况</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;生产过程</a></li>
                             </ul>
                         </li>-->
                    </ul>
                </li>

                <!--库存管理-->
                <li ><a href="#stockdropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i><font  size="3.8"> <strong>库存管理</strong></font></a>
                    <ul id="stockdropdownDropdown" class="collapse list-unstyled ">
                        <li><a href="manageSupplier.html" ><font color="#626262" size="3"><strong>供应商关系管理</strong></font></a>
                            <!--<ul id="supplierDropdown" class="collapse list-unstyled">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增供应商</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询供应商</a></li>-->
                            <!--</ul>-->
                        </li>

                        <li><a href="manageRawMaterial.html" ><font color="#626262" size="3"><strong>原材料信息管理</strong></font></a>
                            <!--<ul id="rawDropdown" class="collapse list-unstyled">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增原材料</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询原材料</a></li>-->
                            <!--</ul>-->
                        </li>

                        <!--<li><a href="#purchaseDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>原材料采购管理</strong></font></a>
                            <ul id="purchaseDropdown" class="collapse list-unstyled">
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增订单</a></li>
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改订单</a></li>
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询订单</a></li>
                            </ul>
                        </li-->

                        <li><a href="manageRMInventory.html" ><font color="#626262" size="3"><strong>原材料库存管理</strong></font></a>
                        </li>

                        <li><a href="managePDenterprise.html" ><font color="#626262" size="3"><strong>印染企业管理</strong></font></a>
                        </li>

                        <li><a href="manageOutsourcingRMInventory.html" ><font color="#626262" size="3"><strong>外协企业原材料管理</strong></font></a>
                        </li>

                        <li><a href="manageFinishedGoods.html" ><font color="#626262" size="3"><strong>成品库存管理</strong></font></a>
                        </li>

                        <!-- <li><a href="#customerDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>客户关系管理</strong></font></a>
                             <ul id="customerDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增客户</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改客户</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询客户</a></li>
                             </ul>
                         </li>

                         <li><a href="#foundryDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>代工企业关系管理</strong></font></a>
                             <ul id="foundryDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增代工企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改代工企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询代工企业</a></li>
                             </ul>
                         </li>

                         <li><a href="#techniqueDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>生产工艺管理</strong></font></a>
                             <ul id="techniqueDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增工艺</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改工艺</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询工艺</a></li>
                             </ul>
                         </li>
                         <li><a href="#dyeingcompanyDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>印染企业关系管理</strong></font></a>
                             <ul id="dyeingcompanyDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询企业</a></li>
                             </ul>
                         </li>-->
                    </ul>
                </li>

            </ul>
        </nav>

        <div class="content-inner">
             <!--Page Header-->

            <header class="page-header">
                <div class="container-fluid">
                    <h1 class="no-margin-bottom">生产工艺新增</h1>
                </div>
            </header>

             <!--Breadcrumb-->
        <div class="col-lg-12">
            <section>

                <div><!--订单表-->
                    <!--订单表格-->
                    <div class="col-lg-12">
                        <div class="card">

                            <div class="card-header d-flex align-items-center">
                                <h3 class="h4">新增生产工艺</h3>
                            </div>



                            <div class="card-body">
                                <!--<div class="form-group row">-->
                                    <!--<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-->
                                    <!--&lt;!&ndash;<button href="index.html" type="button" class="btn btn-link" >返回订单</button>&ndash;&gt;-->
                                    <!--<a class='btn btn-primary ' href="index.html">返回订单</a>-->
                                <!--</div>-->

                                <!--产品Id-->
                                <!--<div>-->
                                    <!--<div class="form-group row">-->
                                        <!--<label class="col-lg-2 form-control-label no-padding-bottom container-fluid text-right"><font size="3.5">Id：</font></label>-->
                                        <!--<div class="col-lg-10 ">-->
                                            <!--<div class="input-group">-->
                                                <!--<input type="text" class="form-control" id="mptGoodsId">-->
                                            <!--</div>&lt;!&ndash; /input-group &ndash;&gt;-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>&lt;!&ndash;产品Id&ndash;&gt;-->

                                <!--工艺名称-->
                                <div>
                                    <div class="form-group row">
                                        <label class="col-lg-2 form-control-label no-padding-bottom container-fluid text-right"><font size="3.5">生产工艺名称：</font></label>
                                        <div class="col-lg-10 ">
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="newPTName">
                                            </div><!-- /input-group -->
                                        </div>
                                    </div>
                                </div><!--工艺名称-->

                                <!--选择产品及新增生产工艺-->
                                <div class="form-group row">
                                    <label class="col-lg-2 form-control-label no-padding-bottom container-fluid text-right"><font size="3.5"> 选择对应产品：</font></label>
                                    <div class="col-lg-8 ">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="choosePTGoods">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="PTBtn">
                                                </button>
                                                <ul class="dropdown-menu pull-right " id="PTGoodsList">
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div><!-- /input-group -->
                                    </div><!-- /.col-lg-8 -->
                                    <button type="button" data-toggle="modal" data-target="#newPTModal" class="btn btn-primary col-lg-2 " id="addNewPT">新增原材料配比</button>
                                    <div id="newPTModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
                                        <div role="document" class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 id="exampleModalLabel" class="modal-title">生产工艺详情</h4>
                                                    <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                                                </div>
                                                <div class="modal-body">

                                                    <form>
                                                        <div class="form-group">
                                                            <label>原材料：</label>
                                                            <div class="input-group">
                                                                <input type="name" class="form-control" id="RMName">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="RMBtn">
                                                                    </button>
                                                                    <ul class="dropdown-menu pull-right " id="RMList">
                                                                    </ul>
                                                                </div><!-- /btn-group -->
                                                            </div>
                                                        </div>

                                                        <div class="form-group">
                                                            <label>比例（%）：</label>
                                                            <div class="input-group">
                                                                <input type="number"  class="form-control" id="RMPercent">

                                                            </div>

                                                        </div>


                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" data-dismiss="modal" class="btn btn-secondary" id="newPTCloseBtn">关闭</button>
                                                    <button type="button" class="btn btn-primary" id="saveNewPTBtn">提交</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!--模态框-->


                                </div><!--选择产品及新增生产工艺-->

                                <div>
                                    <table class="table table-striped table-sm " id="newPTInfoTable">
                                    </table>
                                </div><!--添加生产工艺预览表格-->

                                <div>
                                    <div class="col-lg-1 form-group container-fluid float-right">
                                        <input type="submit" value="提交" class="btn btn-primary" id="placeNewPtClick">
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div><!--订单表格-->
                </div><!--订单表-->
            </section>
        </div>


            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Your company &copy; 2017-2019</p>
                        </div>

                    </div>
                </div>
            </footer>
        <!--</div>-->
    </div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- Main File-->
<script src="js/front.js"></script>
</body>
</html>